<template>
	<view class="popup">
		<u-popup v-model="uView.popup.show" mode="bottom" :mask-custom-style="{background: 'rgba(17, 17, 17, 0.4)'}"
			:safe-area-inset-bottom="true">
			<view class="wd-py-80r" style="background-color: #555;color:#fff">
				<view class="wd-flex wd-items-center wd-flex-wrap">
					<view class="wd-flex-center" style="width:16.667%" v-for="(color, index) in colors" :key="index" @click="onClick(color)">
						<view class="wd-p-20r" :class="activeColor==color?'active':''">
							<view class="" v-if="color=='transparent'">
								<view class="wd-w-60r wd-h-60r wd-rounded-60r wd-truncate" >
									<u-icon name="custom-icon-toumingdu" custom-prefix="custom-icon" size="65"></u-icon>
								</view>
							</view>
							<view class="" v-else>
								<view class="wd-w-60r wd-h-60r wd-rounded-60r" :style="{backgroundColor: color}"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	export default {
		name: "alpha-popup",
		props: {
			canvas: {
				type: Object,
			},
		},
		data() {
			return {
				activeColor: '',
				colors: [
					"transparent",
					"#000",
					"#fff",
					"#f12",
					"#06c",
					"#27d",
					"#35a",
					"#d22",
					"#ea4",
					"#bf4",
					"#ac9",
					"#de2",
					"#d99",
					"#b2b",
					"#c4c",
					"#a1a",
					"#d9d",
					"#efe",
					"#bbb",
					"#ccc",
					"#abc",
				],
				activeObj: {},
				uView: {
					popup: {
						show: false
					}
				}
			};
		},
		watch: {},
		methods: {
			//展示
			show(type) {
				this.uView.popup.show = true;
				this.activeObj = this.canvas.getActiveObject() || {};
				console.log(this.activeObj.fill)
			},
			//关闭
			close() {
				this.uView.popup.show = false;
			},
			//点击
			onClick(color) {
				this.activeColor = color;
				this.activeObj.set({
					fill: color
				})
				this.canvas.renderAll();
			}
		},
	}
</script>

<style>
	.popup {
		.active {
			padding: 10rpx;
			border-radius: 70rpx;
			border: 2rpx solid #fff;
		}
	}
</style>